import React, { PureComponent } from "react";
import { push, goBack } from "react-router-redux";
import { connect } from "react-redux";
import style from "./style.less";
import { Form, Icon, Radio, Input, Button, Checkbox, Cascader,Select } from "antd";
import ErrTip from "../ErrTip";
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const options = [{
  value: 'zhejiang',
  label: 'Zhejiang',
  children: [{
    value: 'hangzhou',
    label: 'Hangzhou',
    children: [{
      value: 'xihu',
      label: 'West Lake',
    }],
  }],
}, {
  value: 'jiangsu',
  label: 'Jiangsu',
  children: [{
    value: 'nanjing',
    label: 'Nanjing',
    children: [{
      value: 'zhonghuamen',
      label: 'Zhong Hua Men',
    }],
  }],
}];

function onChange(value) {
  console.log(value);
}


class Personal extends PureComponent {
  
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
      }
    });
  };
  state = {
    value: 1,
  };
  onChange = e => {
    console.log("radio checked", e.target.value);
    this.setState({
      value: e.target.value
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className={style.Personalbox}>
        <span className={style.Perinfo}>个人信息</span>
        <Form onSubmit={this.handleSubmit}>
          <FormItem className={style.FormItem}>
            {getFieldDecorator("userName", {
              rules: [{ required: true, message: <ErrTip>请输入姓名</ErrTip> }]
            })(<Input placeholder="姓名" className={style.userName} />)}
          </FormItem>
          <FormItem className={style.FormItem}>
            <RadioGroup onChange={this.onChange} value={this.state.value}>
              <Radio value={1}>男</Radio>
              <Radio value={2}>女</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem className={style.FormItem}>
            <Cascader options={options} onChange={onChange} placeholder="出生年月" className={style.birthday} />
          </FormItem>
          <FormItem className={style.FormItem}>
            <Cascader options={options} onChange={onChange} placeholder="参加工作时间" className={style.birthday} />
          </FormItem>
          <FormItem className={style.FormItem}>
            <Cascader options={options} onChange={onChange} placeholder="现居住地(杭州)" className={style.birthday} />
          </FormItem>
          <FormItem className={style.FormItem}>
            <Cascader options={options} onChange={onChange} placeholder="期望工作城市" className={style.birthday} />
          </FormItem>
          <FormItem className={style.FormItem}>
            <Cascader options={options} onChange={onChange} placeholder="期望职位" className={style.birthday} />
          </FormItem>
          <FormItem className={style.FormItem}>
            <Cascader options={options} onChange={onChange} placeholder="期望行业" className={style.birthday} />
          </FormItem>
          <FormItem className={style.FormItem}>
            <Select  placeholder="期望月薪">
              <Option value="1">1001-2000</Option>
              <Option value="2">2001-3000</Option>
              <Option value="3">3001-5000</Option>
              <Option value="4">4500-6000</Option>
              <Option value="5">6000-8000</Option>
              <Option value="6">8000-10000</Option>
              <Option value="7">10000-15000</Option>
            </Select>
          </FormItem>

         
          <FormItem className={style.FormItem}>
            <Checkbox onChange={onChange} defaultChecked>企业查看简历时显示为面议</Checkbox>
          </FormItem>
          <FormItem className={style.FormItem}>
            {getFieldDecorator("email", {
                rules: [{ required: true, message: <ErrTip>请输入常用邮箱</ErrTip> }]
              })(<Input placeholder="请输入常用邮箱" className={style.email} />)}
          </FormItem>
          <FormItem className={style.FormItem}>
            用于接收投递简历反馈
          </FormItem>
          <FormItem>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              保存
            </Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {};
};

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    navigateTo: location => {
      dispatch(push(location));
    },
    goBack: () => {
      dispatch(goBack());
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Form.create()(Personal));
